<template>
  <div class="app-container">
    <div style="padding: 20px 20px 0 20px;">
      分配部门：{{ $route.query.name }}
    </div>
    <el-tree
      class="tree"
      style="margin: 20px 0"
      ref="tree"
      :data="sysDeptList"
      node-key="id"
      show-checkbox
      default-expand-all
      :props="defaultProps"
      @node-click="handleNodeClick"
      @check-change="checkChange"
      :check-strictly="true"
    />
    <div style="padding: 20px 20px;">
      <el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="save">保存</el-button>
      <el-button @click="$router.push('/system/sysUser')" size="mini" icon="el-icon-refresh-right">返回</el-button>
    </div>
  </div>
</template>
<script>
import api from '@/api/system/dept'

export default {
  name: 'userDept',

  data() {
    return {
      loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
      sysDeptList: [], // 所有
      userDeptId: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    /*
    初始化
    */
    fetchData() {
      const userId = this.$route.query.id
      api.getDeptsByUserId(userId).then(result => {
        const sysDeptList = result.data
        this.sysDeptList = sysDeptList
        const checkedIds = this.getCheckedIds(sysDeptList)
        this.$refs.tree.setCheckedKeys(checkedIds)
      })
    },

    handleNodeClick(item, node, self) { //自己定义的editCheckId，防止单选出现混乱
      this.editCheckId = item.id
      this.$refs.tree.setCheckedKeys([item.id])
    },

    checkChange(item, node, self) {
      if (node == true) {
        this.editCheckId = item.id
        this.$refs.tree.setCheckedKeys([item.id])
      } else {
        if (this.editCheckId == item.id) {
          this.$refs.tree.setCheckedKeys([item.id])
        }
      }
    },

    /*
    得到所有选中的id列表
    */
    getCheckedIds(auths, initArr = []) {
      return auths.reduce((pre, item) => {
        if (item.select && item.children.length === 0) {
          pre.push(item.id)
        } else if (item.children) {
          this.getCheckedIds(item.children, initArr)
        }
        return pre
      }, initArr)
    },

    /*
    保存权限列表
    */
    save() {
      debugger
      //获取到当前子节点
      //const checkedNodes = this.$refs.tree.getCheckedNodes()
      //获取到当前子节点及父节点
      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true)
      let idList = allCheckedNodes.map(node => node.id)
      console.log(idList)
      let assginDeptVo = {
        userId: this.$route.query.id,
        deptId: idList[0]
      }
      this.loading = true
      api.assignDepts(assginDeptVo).then(result => {
        this.loading = false
        this.$message.success(result.$message || '分配部门成功')
        this.$router.push('/system/sysUser')
      })
    }
  }
}
</script>

<style>

.tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
  display: inline-block;
}

.tree .el-tree-node .el-checkbox .el-checkbox__inner {
  display: none;
}
</style>
